<template>
    <div>
        <el-dialog title="添加党费使用" :visible.sync="dialogVisible" width='450px' append-to-body v-dialogDrag :close-on-click-modal="false" >
            <div>
                <el-form ref="rowdata" :model="rowdata" label-width="100px" class="personeditform" :rules="rules" status-icon>
                    <el-form-item label="年份" >
                        <el-input v-model="year" placeholder="请输入内容" :disabled="true"  style="margin-left: 30px;width: 120px;">
                            <template slot="append">年</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="党委名称" prop="dwid">
                        <el-select v-model="rowdata.dwid" placeholder="请选择党委" @change="changeperson">
                            <el-option v-for="item in dws" :key="item.dwid" :label="item.dwname" :value="item.dwid">
                                <span style="float: left">{{ item.dwname }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.dwid }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="支出金额" prop="money">
                        <el-input v-model="rowdata.money" style="width: 80%;" placeholder="支出金额"></el-input>
                    </el-form-item>
                    <el-form-item label="支出时间" prop="time">
                        <el-date-picker v-model="rowdata.time" type="date" placeholder="" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="主管领导" prop="lingdao">
                        <el-input v-model="rowdata.lingdao" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="经办人" prop="jingbanren">
                        <el-input v-model="rowdata.jingbanren" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="支出原因" prop="reason">
                        <el-input v-model="rowdata.reason" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <span >如果有相关电子文件请到党费管理-相关文件中进行上传</span>
                    </el-form-item>
                </el-form>
                <el-row style="position: relative;width: 100%;">
                    <el-button style="margin: 0 auto;display: block;"  type="primary" @click="checksubmit('rowdata')">确定<i class="el-icon-upload el-icon--right" ></i></el-button>
                </el-row>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {mapActions} from 'vuex';
    export default {
        data() {
            return { 
                dialogVisible: false, 
                year:-1,
                rowdata:{
                    dwname:'',
                    dwid:'',
                    dzbid:-1,
                    time:'',
                    money:'0',
                    lingdao:'',
                    jingbanren:'',
                    reason:'',
                },
                dws:[],
                rules: {
                    dwid: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    money: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    time: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    lingdao: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    jingbanren: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    reason: [{ required: true, message: '不能为空', trigger: 'blur' }],
                    
                },
            };
            
        },
        mounted() {  

        },
        components: {},
        watch: {
            dialogVisible: function (n) {
                if (n == true) {
                    let _this=this; 
                    _this.dws=[];
                    this.GetZbById({dwid:-1,dzbid:-1})
                    .then(function(data){
                        _this.dws.push({
                            dwid:data.PostThis.dwid,
                            dwname:data.PostThis.alias
                        })
                        for (let index = 0; index < data.childs.length; index++) {
                            const element = data.childs[index];
                            _this.dws.push({
                                dwid:element.dwid,
                                dwname:element.alias
                            })
                        }
                    }).catch(function(reason) {
                        console.log('catch:', reason);
                    });
                    this.rowdata={
                        dwname:'',
                        dwid:'',
                        dzbid:-1,
                        time:'',
                        money:'0',
                        lingdao:'',
                        jingbanren:'',
                        reason:'',
                    }
                }
            },
        },
        methods: {
            ...mapActions(['GetZbById']),
            changeperson(dwid)
            {
                this.rowdata.dwname=this.dws.filter(function(value){
                    return value.dwid==dwid;
                })[0].dwname;
            },
            checksubmit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.uploadToServe();
                    } 
                    else {
                        this.$message("请填写必要信息");
                        return false;
                    }
                });
            },
            uploadToServe(){
                let _this=this;
                this.rowdata.year=this.year;
                let postdata={
                    type:"adddangfeisy",
                    split:JSON.stringify(this.rowdata)
                }
                _this.$Common.AjaxPost(postdata,true)
                .then(function(e){
                    _this.dialogVisible=false;
                    _this.$emit('editResult');
                },function(reason){
                    console.log('false:', reason);
                }).catch(function(reason) {
                    console.log('catch:', reason);
                });
            },
        },

    }
</script>
<style>
</style>